<template>
  <div class="newGroupContainer">
    <el-form :model="createGroupData"
             label-width="80px"
             style="width: 260px;">
      <el-form-item label="群头像">
        <el-upload class="avatar-uploader"
                   :action="this.$aimPath + '/uploadGroupInfo' "
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :on-change="beforeAvatarChange"
                   :before-upload="beforeAvatarUpload"
                   :auto-upload='false'
                   ref="upload"
                   :data="createGroupData">
          <img v-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="群账号">
        <el-input v-model="createGroupData.UG_GroupID"
                  size="mini"
                  clearable></el-input>
      </el-form-item>

      <el-form-item label="群名">
        <el-input v-model="createGroupData.UG_Name"
                  size="mini"
                  clearable></el-input>
      </el-form-item>

      <el-form-item label="群介绍">
        <el-input v-model="createGroupData.UG_Intro"
                  size="mini"
                  clearable></el-input>
      </el-form-item>

      <el-button size="mini"
                 type="primary"
                 style="float:right;"
                 @click="btnSubmit">创建</el-button>
    </el-form>

  </div>

</template>
<script>
export default {
  name: 'createGroup',
  data () {
    return {
      // 创建一个群所需要的数据
      createGroupData: {
        // 群账号
        UG_GroupID: '',
        // 群名
        UG_Name: '',
        // 管理员账号
        UG_AdminID: '',
        // 群介绍
        UG_Intro: ''
      },
      imageUrl: ''
    }
  },
  methods: {
    // 提交创建的群的数据
    btnSubmit () {
      this.createGroupData.UG_AdminID = window.sessionStorage.getItem('selfInfo')
      this.$refs.upload.submit()
    },
    // 创建成功后
    handleAvatarSuccess (res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw)
      // console.log(res)
      if (res.code !== 200) return this.$message.error(res.msg)
      // 刷新自己管理的群的数据
      this.$emit('refreshGroup', res.data)
      return this.$message.success(res.msg)
    },
    // 上传组件有改变时
    beforeAvatarChange (file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
        })
      }
      const size = file.size / 1024 / 1024 / 2
      if (size > 2) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.newGroupContainer {
  width: 400px;
  margin-top: 90px;
  margin-left: 80px;

  .newGroupContainer {
    margin-bottom: 0;
  }
}

.el-form-item {
  margin-bottom: 0;
}

.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
